<template>
<view>
	<view class="distance" v-for="(item,index) in distanceList.carApplyAddressList" :key="index">
		<view class="itemImg d-flex a-center" v-if="index==0">
			<view class="img d-flex a-center">
				<image src="https://www.xsclgl.com/upload/img/address/index1.png" mode="aspectFit"></image>
				<view>起点</view>
			</view>
		</view>
		<view class="itemImg d-flex a-center" v-if="index!==0&&index!==distanceList.carApplyAddressList.length-1">
			<view class="line"></view>
			<view class="img d-flex a-center">
				<image src="https://www.xsclgl.com/upload/img/address/index2.png" mode="aspectFit"></image>
				<view>目的地{{index|numberValue}}</view>
			</view>
		</view>
		<view class="itemImg d-flex a-center" v-if="index==distanceList.carApplyAddressList.length-1">
			<view class="line"></view>
			<view class="img d-flex a-center">
				<image src="https://www.xsclgl.com/upload/img/address/index3.png" mode="aspectFit"></image>
				<view>终点</view>
			</view>
		</view>
		
		<view class="distance-item" >
			<view class="d-flex">
				<view class="">省市区：</view>
				<view class="">{{item.provinceName}}{{item.cityName}}{{item.areaName}}</view>
			</view>
			<view class="d-flex mt5">
				<view class="">详细地址：</view>
				<view class="">{{item.address}}</view>
			</view>
		</view>
		<!-- <image class="downImage" src="https://www.xsclgl.com/upload/img/icon/bottom.png" mode="aspectFit" v-if="index!==distanceList.carApplyAddressList.length-1"></image> -->
	</view>
</view>
	
</template>

<script>
	export default {
		props:['distanceList']
	}
</script>

<style lang="scss" scoped>
	.distance {
		background-color: #fff;
		.itemImg {
			font-size: 16px;
			color: #4AB4FF;
			line-height: 23px;
			margin: 7px 0;
			position: relative;
			font-style:italic;
		
			image {
				height: 16px;
				width: 16px;
				display: flex;
				margin-right: 10px;
			}
		}
		.line {
			bottom: 12px;
			left: 7px;
			position: absolute;
			width: 2px;
			height: 100px;
			background: #4AB4FF;
			z-index: 0;
		}
		&-item {
			width: 90%;
			margin-left: 7%;
			border-radius: 7px;
			background-color: #36ACFE;
			padding: 11px 16px;
			box-sizing: border-box;
			color: #fff;
			font-size: 14px;
			font-weight: 400;
		}
	}
</style>